<template>
  <el-scrollbar :wrap-class="{ wrapClass: true }">
    <div class="app-container">
      <div class="filter-container" size="small">
        <el-input
          v-model="listQuery.title"
          size="small"
          placeholder="标题"
          style="width: 200px"
          class="filter-item"
          clearable
        />
        <el-button-group>
          <el-button
            class="filter-item"
            size="small"
            icon="el-icon-search"
            type="primary"
            plain
            @click="search"
          >
            {{ $t("table.search") }}
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="add"
          >
            {{ $t("table.add") }}
          </el-button>
        </el-button-group>
        <el-button
          size="small"
          class="filter-item right"
          icon="el-icon-refresh"
          type="primary"
          plain
          @click="refresh()"
        >
          刷新
        </el-button>
      </div>

      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        :height="
          listQuery.total > 0 ? 'calc(100vh - 205px)' : 'calc(100vh - 170px)'
        "
        :header-cell-style="{ background: '#F2F6FC' }"
        element-loading-text="Loading"
        fit
        border
        size="medium"
      >
        <el-table-column align="center" label="序号" width="50" type="index" />
        <el-table-column label="标题" prop="title" align="center" />
        <el-table-column
          label="国家"
          prop="country"
          width="200px"
          align="center"
        />
        <el-table-column label="需求量" prop="requireQuantity" align="center" />
        <el-table-column label="状态" width="200px" align="center">
          <template slot-scope="scope">
            <strong v-if="scope.row.state === 0">未发布</strong>
            <strong v-else-if="scope.row.state === 1" style="color: #67c23a"
              >已发布</strong
            >
            <strong v-else-if="scope.row.state === 2">发布撤回</strong>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="340">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="edit(scope.row)"
                >编辑
              </el-button>
              <el-button
                v-if="scope.row.state === 1"
                type="danger"
                size="mini"
                icon="el-icon-folder-delete"
                @click="revoke(scope.row.id)"
                >撤销
              </el-button>
              <el-button
                v-else
                type="warning"
                size="mini"
                icon="el-icon-s-claim"
                @click="publish(scope.row.id)"
                >发布
              </el-button>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-view"
                @click="view(scope.row)"
                >查看
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="deleteRow(scope.row.id)"
                >删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <pagination
        v-show="listQuery.total > 0"
        :total="listQuery.total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
      <Edit
        :rowData="rowData"
        :show.sync="showState"
        @closeAction="closeAction"
      />
      <Info
        :rowData="rowData"
        :show.sync="showViewState"
        @closeAction="closeAction"
      />
    </div>
  </el-scrollbar>
</template>

<script>
import Pagination from "@/components/Pagination";
import Edit from "./edit.vue";
import Info from "../userData/info.vue";
import { getAction, postAction, deleteAction } from "@/api/common";

export default {
  name: "index",
  components: {
    Pagination,
    Edit,
    Info,
  },
  data() {
    return {
      listLoading: true,
      list: [],
      // 列表搜索条件
      listQuery: {
        page: 1,
        total: 0,
        limit: 20,
        name: "",
        state: "",
      },
      rowData: {},
      showState: false,
      showViewState: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data } = await getAction(this.listQuery, "buyerData/UserIndex");
      this.list = data.items;
      this.listQuery.total = data.total;
      this.listLoading = false;
    },
    add() {
      this.rowData = {};
      this.showState = true;
    },
    edit(row) {
      this.rowData = Object.assign({}, row); // 拷贝对象，否则会影响到row
      if (row.image === "" || row.image === null) {
        this.rowData.image = [];
      } else {
        this.rowData.image = JSON.parse(row.image);
      }
      this.showState = true;
    },
    view(rowData) {
      this.rowData = Object.assign({}, rowData); // 拷贝对象，否则会影响到row
      this.showViewState = true;
    },
    //发布
    async publish(id) {
      this.$confirm("是否确认发布", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await postAction(id, `buyerData/Publish/${id}`);
          if (res.code === 20000) {
            this.$message({
              type: "success",
              message: res.message,
              center: true,
            });
          } else {
            this.$message({
              type: "warning",
              message: res.message,
              center: true,
            });
          }
          this.refresh();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    // 撤销发布
    async revoke(id) {
      this.$confirm("是否确认撤销发布", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await postAction(id, `buyerData/revoke/${id}`);
          if (res.code === 20000) {
            this.$message({
              type: "success",
              message: res.message,
              center: true,
            });
          } else {
            this.$message({
              type: "warning",
              message: res.message,
              center: true,
            });
          }
          this.refresh();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    async deleteRow(id) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deleteAction(null, `buyerData/DelInfo/${id}`);
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
            duration: 2000,
          });
          this.refresh();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    search() {
      this.listQuery.page = 1;
      this.fetchData();
    },
    refresh() {
      this.fetchData();
    },
    closeAction() {
      this.showState = false;
      this.showViewState = false;
      this.fetchData();
    },
  },
};
</script>

<style scoped>
</style>
